@use "@/common/styles/colors"

.server-object
  display: flex
  align-items: center
  gap: 0.5rem
  color: colors.$light-gray
  border: 1px solid transparent
  padding: 0.4rem
  cursor: pointer
  font-weight: 600

  .system-icon
    width: 1.5rem
    height: 1.5rem
    display: flex
    border-radius: 0.2rem
    justify-content: center
    align-items: center
    background-color: colors.$primary
    svg
      color: white
      width: 1rem

  .system-icon-offline
    background-color: colors.$gray
    opacity: 0.6

  .pve-icon
    width: 1.5rem
    height: 1.5rem
    display: flex
    border-radius: 0.2rem
    justify-content: center
    align-items: center
    background-color: colors.$warning
    svg
      color: white
      width: 1rem

  .pve-icon-offline
    background-color: colors.$gray
    opacity: 0.6

  p
    margin: 0
    flex: 1

  .tag-circles
    display: flex
    gap: 4px
    margin-left: auto
    padding-right: 4px

    .tag-circle
      width: 10px
      height: 10px
      border-radius: 50%
      flex-shrink: 0

  &:hover
    color: colors.$white
    background-color: colors.$dark-gray
    border: 1px solid colors.$gray
    border-radius: 0.3rem

.server-is-over
  background-color: colors.$dark-gray
  border: 1px solid colors.$gray
  border-radius: 0.3rem
